<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
		<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			
			ul,li{
				margin: 0px;
				padding: 0px;
			}
			.margin-tb{
				margin: 10px auto;
				border: 1px solid #CCCCCC;
				padding: 5px;
				border-radius: 5px;
				box-shadow: 0px 5px 5px #CCCCCC;
			}
			.media .media-left img{
				width: 80px;
			}
			.media ul{
				list-style: none;
			}
			.media ul li:nth-child(1){
				font-weight: bold;
				font-size: 16px;
			}
			.margin_top_border{
				margin-top: 20px;
			}
			#navbar-example{
				background: rgba(255,255,255,.7);
			}
			.shopping{
				width: 250px;
				position: fixed;
				right: -250px;
				bottom: 15%;
				background: rgba(0,0,0,.3);
				
			}
			.shopping .shopping_bus{
				width: 25px;
				height: 80px;
				/*background: red;*/
				background: rgba(255,255,255,.5);
				position: absolute;
				left: -25px;
				text-align: center;
				top: 40%;
			}
			.shopping h4,.shopping .main,.shopping .shopping_bottom{
				background: #F8F8F8;
				padding: 6px;
			}
			
			.shopping .shopping_bottom{
				position: absolute;
				bottom: 0px;
				width: 100%;
			}
		</style>
		<script type="text/javascript">
			$(function(){
//				alert($(window).height()); //浏览器当前窗口可视区域高度 
//				alert($(document).height()); //浏览器当前窗口文档的高度 
//				alert($(document.body).height());//浏览器当前窗口文档body的高度 

			var win_height = $(window).height()*0.7;
				$(".shopping").css("height",win_height+"px");

				$(window).scroll(function(){
					console.log($(window).scrollTop())
					if($(window).scrollTop()>=160){
						$("#navbar-example").addClass("navbar-fixed-top");
					}else{
						$("#navbar-example").removeClass("navbar-fixed-top");
					}
				})
				
				$(".shopping_bus").click(function(){
					var shopping =$(".shopping");
					var right = shopping.css("right");
					if(right=="-250px"){
						shopping.animate({right:"0px"},500);
					}else{
						shopping.animate({right:"-250px"},500);
					}
				})
				
				$(".media-body button").click(function(){
					var name = "";
					var prive = 0;
					var total = 0;
					
					var ul= $(this).parents("ul");
					var lis = ul.children();
					prive = lis.get(2).innerText.substring(1).trim();
					name = lis.get(0).innerText;
					
					
					var newTR = `<tr>
						<td>${name}</td>
						<td>
							<a href="#" title="+"><span class="glyphicon glyphicon-plus"></span></a>
							<span>1</span>
							<a href="#" title="-"><span class="glyphicon glyphicon-minus"></span></a>
						</td>
						<td class="text-danger">
							￥ ${prive}
						</td>
					</tr>`;
					
					$(".shopping .main table").append(newTR);
					
				})
				
				
				$(".shopping").on("click",".main table a",function(){
					if($(this).attr("title")=="+"){
						var num = parseInt($(this).next().text());
						num+=1;
						$(this).next().text(num);
					}else if($(this).attr("title")=="-"){
						//上一个元素
						var num = parseInt($(this).prev().text());
						num-=1;
						
						if(num<1){
							$(this).parents("tr").remove();
						}
						
						$(this).prev().text(num);
					}
					
				})
			})
		</script>
	</head>
	<body data-spy="scroll" data-target="#navbar-example">
		
		<div>
			<img style="width: 100%;height: 150px;" src="http://shadow.elemecdn.com/faas/desktop/media/img/shop-bg.0391dd.jpg"/>
		</div>
		
		<div class="container margin-tb" id="navbar-example">
			<ul class="nav nav-pills nav-justified">
			  <li><a href="#div1">主食</a></li>
			  <li><a href="#div2">小炒</a></li>
			  <li><a href="#div3">面食</a></li>
			  <li><a href="#div4">饮料</a></li>
			</ul>
		</div>
		
		<div class="container margin-tb">
			<h4 id="div1">主食</h4>
			<hr />
			
			<div class="row">
				
				
				<div class="col-sm-3">
					<div class="media">
						<div class="media-left">
							<a href="#">
								<img class="media-object" src="img/5a4af1c22a677.293.png"/>
							</a>
						</div>
						<div class="media-body">
							<ul>
								<li>烩麻食</li>
								<li class="text-muted">月销售14单</li>
								<li class="text-danger">￥ &nbsp;34</li>
								<li><button class="btn btn-primary btn-xs"><span class="glyphicon glyphicon-shopping-cart"></span> &nbsp;购物车</button></li>
							</ul>
						</div>
					</div>
				</div>
				<div class="col-sm-3">
					<div class="media">
						<div class="media-left">
							<a href="#">
								<img class="media-object" src="img/5a4af1c22a677.293.png"/>
							</a>
						</div>
						<div class="media-body">
							<ul>
								<li>大米</li>
								<li class="text-muted">月销售134单</li>
								<li class="text-danger">￥ &nbsp;2</li>
								<li><button class="btn btn-primary btn-xs"><span class="glyphicon glyphicon-shopping-cart"></span> &nbsp;购物车</button></li>
							</ul>
						</div>
					</div>
				</div>
				<div class="col-sm-3">
					<div class="media">
						<div class="media-left">
							<a href="#">
								<img class="media-object" src="img/5a4af1c22a677.293.png"/>
							</a>
						</div>
						<div class="media-body">
							<ul>
								<li>精品,豪华,麻辣烫</li>
								<li class="text-muted">月销售54单</li>
								<li class="text-danger">￥ &nbsp;66</li>
								<li><button class="btn btn-primary btn-xs"><span class="glyphicon glyphicon-shopping-cart"></span> &nbsp;购物车</button></li>
							</ul>
						</div>
					</div>
				</div>
				<div class="col-sm-3">
					<div class="media">
						<div class="media-left">
							<a href="#">
								<img class="media-object" src="img/5a4af1c22a677.293.png"/>
							</a>
						</div>
						<div class="media-body">
							<ul>
								<li>烩麻食</li>
								<li class="text-muted">月销售34单</li>
								<li class="text-danger">￥ &nbsp;34</li>
								<li><button class="btn btn-primary btn-xs"><span class="glyphicon glyphicon-shopping-cart"></span> &nbsp;购物车</button></li>
							</ul>
						</div>
					</div>
				</div>
				
				
				
				
			</div>
			
			<div class="row margin_top_border">
				
				
				<div class="col-sm-3">
					<div class="media">
						<div class="media-left">
							<a href="#">
								<img class="media-object" src="img/5a4af1c22a677.293.png"/>
							</a>
						</div>
						<div class="media-body">
							<ul>
								<li>烩麻食</li>
								<li class="text-muted">月销售34单</li>
								<li class="text-danger">￥ &nbsp;34</li>
								<li><button class="btn btn-primary btn-xs"><span class="glyphicon glyphicon-shopping-cart"></span> &nbsp;购物车</button></li>
							</ul>
						</div>
					</div>
				</div>
				<div class="col-sm-3">
					<div class="media">
						<div class="media-left">
							<a href="#">
								<img class="media-object" src="img/5a4af1c22a677.293.png"/>
							</a>
						</div>
						<div class="media-body">
							<ul>
								<li>烩麻食</li>
								<li class="text-muted">月销售34单</li>
								<li class="text-danger">￥ &nbsp;34</li>
								<li><button class="btn btn-primary btn-xs"><span class="glyphicon glyphicon-shopping-cart"></span> &nbsp;购物车</button></li>
							</ul>
						</div>
					</div>
				</div>
				
				
				
				
			</div>
		</div>
	
		<div class="container margin-tb">
			<h4 id="div2">小炒</h4>
			<hr />
			
			<div class="row">
				
				
				<div class="col-sm-3">
					<div class="media">
						<div class="media-left">
							<a href="#">
								<img class="media-object" src="img/5a4af1c22a677.293.png"/>
							</a>
						</div>
						<div class="media-body">
							<ul>
								<li>烩麻食</li>
								<li class="text-muted">月销售34单</li>
								<li class="text-danger">￥ &nbsp;34</li>
								<li><button class="btn btn-primary btn-xs"><span class="glyphicon glyphicon-shopping-cart"></span> &nbsp;购物车</button></li>
							</ul>
						</div>
					</div>
				</div>
				<div class="col-sm-3">
					<div class="media">
						<div class="media-left">
							<a href="#">
								<img class="media-object" src="img/5a4af1c22a677.293.png"/>
							</a>
						</div>
						<div class="media-body">
							<ul>
								<li>烩麻食</li>
								<li class="text-muted">月销售34单</li>
								<li class="text-danger">￥ &nbsp;34</li>
								<li><button class="btn btn-primary btn-xs"><span class="glyphicon glyphicon-shopping-cart"></span> &nbsp;购物车</button></li>
							</ul>
						</div>
					</div>
				</div>
				<div class="col-sm-3">
					<div class="media">
						<div class="media-left">
							<a href="#">
								<img class="media-object" src="img/5a4af1c22a677.293.png"/>
							</a>
						</div>
						<div class="media-body">
							<ul>
								<li>烩麻食</li>
								<li class="text-muted">月销售34单</li>
								<li class="text-danger">￥ &nbsp;34</li>
								<li><button class="btn btn-primary btn-xs"><span class="glyphicon glyphicon-shopping-cart"></span> &nbsp;购物车</button></li>
							</ul>
						</div>
					</div>
				</div>
				<div class="col-sm-3">
					<div class="media">
						<div class="media-left">
							<a href="#">
								<img class="media-object" src="img/5a4af1c22a677.293.png"/>
							</a>
						</div>
						<div class="media-body">
							<ul>
								<li>烩麻食</li>
								<li class="text-muted">月销售34单</li>
								<li class="text-danger">￥ &nbsp;34</li>
								<li><button class="btn btn-primary btn-xs"><span class="glyphicon glyphicon-shopping-cart"></span> &nbsp;购物车</button></li>
							</ul>
						</div>
					</div>
				</div>
				
				
				
				
			</div>
			
			<div class="row margin_top_border">
				
				
				<div class="col-sm-3">
					<div class="media">
						<div class="media-left">
							<a href="#">
								<img class="media-object" src="img/5a4af1c22a677.293.png"/>
							</a>
						</div>
						<div class="media-body">
							<ul>
								<li>烩麻食</li>
								<li class="text-muted">月销售34单</li>
								<li class="text-danger">￥ &nbsp;34</li>
								<li><button class="btn btn-primary btn-xs"><span class="glyphicon glyphicon-shopping-cart"></span> &nbsp;购物车</button></li>
							</ul>
						</div>
					</div>
				</div>
				<div class="col-sm-3">
					<div class="media">
						<div class="media-left">
							<a href="#">
								<img class="media-object" src="img/5a4af1c22a677.293.png"/>
							</a>
						</div>
						<div class="media-body">
							<ul>
								<li>烩麻食</li>
								<li class="text-muted">月销售34单</li>
								<li class="text-danger">￥ &nbsp;34</li>
								<li><button class="btn btn-primary btn-xs"><span class="glyphicon glyphicon-shopping-cart"></span> &nbsp;购物车</button></li>
							</ul>
						</div>
					</div>
				</div>
				
				
				
				
			</div>
		</div>
		
		<div class="container margin-tb">
			<h4 id="div3">面食</h4>
			<hr />
			
			<div class="row">
				
				
				<div class="col-sm-3">
					<div class="media">
						<div class="media-left">
							<a href="#">
								<img class="media-object" src="img/5a4af1c22a677.293.png"/>
							</a>
						</div>
						<div class="media-body">
							<ul>
								<li>烩麻食</li>
								<li class="text-muted">月销售34单</li>
								<li class="text-danger">￥ &nbsp;34</li>
								<li><button class="btn btn-primary btn-xs"><span class="glyphicon glyphicon-shopping-cart"></span> &nbsp;购物车</button></li>
							</ul>
						</div>
					</div>
				</div>
				<div class="col-sm-3">
					<div class="media">
						<div class="media-left">
							<a href="#">
								<img class="media-object" src="img/5a4af1c22a677.293.png"/>
							</a>
						</div>
						<div class="media-body">
							<ul>
								<li>烩麻食</li>
								<li class="text-muted">月销售34单</li>
								<li class="text-danger">￥ &nbsp;34</li>
								<li><button class="btn btn-primary btn-xs"><span class="glyphicon glyphicon-shopping-cart"></span> &nbsp;购物车</button></li>
							</ul>
						</div>
					</div>
				</div>
				<div class="col-sm-3">
					<div class="media">
						<div class="media-left">
							<a href="#">
								<img class="media-object" src="img/5a4af1c22a677.293.png"/>
							</a>
						</div>
						<div class="media-body">
							<ul>
								<li>烩麻食</li>
								<li class="text-muted">月销售34单</li>
								<li class="text-danger">￥ &nbsp;34</li>
								<li><button class="btn btn-primary btn-xs"><span class="glyphicon glyphicon-shopping-cart"></span> &nbsp;购物车</button></li>
							</ul>
						</div>
					</div>
				</div>
				<div class="col-sm-3">
					<div class="media">
						<div class="media-left">
							<a href="#">
								<img class="media-object" src="img/5a4af1c22a677.293.png"/>
							</a>
						</div>
						<div class="media-body">
							<ul>
								<li>烩麻食</li>
								<li class="text-muted">月销售34单</li>
								<li class="text-danger">￥ &nbsp;34</li>
								<li><button class="btn btn-primary btn-xs"><span class="glyphicon glyphicon-shopping-cart"></span> &nbsp;购物车</button></li>
							</ul>
						</div>
					</div>
				</div>
				
				
				
				
			</div>
			
			<div class="row margin_top_border">
				
				
				<div class="col-sm-3">
					<div class="media">
						<div class="media-left">
							<a href="#">
								<img class="media-object" src="img/5a4af1c22a677.293.png"/>
							</a>
						</div>
						<div class="media-body">
							<ul>
								<li>烩麻食</li>
								<li class="text-muted">月销售34单</li>
								<li class="text-danger">￥ &nbsp;34</li>
								<li><button class="btn btn-primary btn-xs"><span class="glyphicon glyphicon-shopping-cart"></span> &nbsp;购物车</button></li>
							</ul>
						</div>
					</div>
				</div>
				<div class="col-sm-3">
					<div class="media">
						<div class="media-left">
							<a href="#">
								<img class="media-object" src="img/5a4af1c22a677.293.png"/>
							</a>
						</div>
						<div class="media-body">
							<ul>
								<li>烩麻食</li>
								<li class="text-muted">月销售34单</li>
								<li class="text-danger">￥ &nbsp;34</li>
								<li><button class="btn btn-primary btn-xs"><span class="glyphicon glyphicon-shopping-cart"></span> &nbsp;购物车</button></li>
							</ul>
						</div>
					</div>
				</div>
				
				
				
				
			</div>
		</div>
		<div class="container margin-tb">
			<h4 id="div4">饮料</h4>
			<hr />
			
			<div class="row">
				
				
				<div class="col-sm-3">
					<div class="media">
						<div class="media-left">
							<a href="#">
								<img class="media-object" src="img/5a4af1c22a677.293.png"/>
							</a>
						</div>
						<div class="media-body">
							<ul>
								<li>烩麻食</li>
								<li class="text-muted">月销售34单</li>
								<li class="text-danger">￥ &nbsp;34</li>
								<li><button class="btn btn-primary btn-xs"><span class="glyphicon glyphicon-shopping-cart"></span> &nbsp;购物车</button></li>
							</ul>
						</div>
					</div>
				</div>
				<div class="col-sm-3">
					<div class="media">
						<div class="media-left">
							<a href="#">
								<img class="media-object" src="img/5a4af1c22a677.293.png"/>
							</a>
						</div>
						<div class="media-body">
							<ul>
								<li>烩麻食</li>
								<li class="text-muted">月销售34单</li>
								<li class="text-danger">￥ &nbsp;34</li>
								<li><button class="btn btn-primary btn-xs"><span class="glyphicon glyphicon-shopping-cart"></span> &nbsp;购物车</button></li>
							</ul>
						</div>
					</div>
				</div>
				<div class="col-sm-3">
					<div class="media">
						<div class="media-left">
							<a href="#">
								<img class="media-object" src="img/5a4af1c22a677.293.png"/>
							</a>
						</div>
						<div class="media-body">
							<ul>
								<li>烩麻食</li>
								<li class="text-muted">月销售34单</li>
								<li class="text-danger">￥ &nbsp;34</li>
								<li><button class="btn btn-primary btn-xs"><span class="glyphicon glyphicon-shopping-cart"></span> &nbsp;购物车</button></li>
							</ul>
						</div>
					</div>
				</div>
				<div class="col-sm-3">
					<div class="media">
						<div class="media-left">
							<a href="#">
								<img class="media-object" src="img/5a4af1c22a677.293.png"/>
							</a>
						</div>
						<div class="media-body">
							<ul>
								<li>烩麻食</li>
								<li class="text-muted">月销售34单</li>
								<li class="text-danger">￥ &nbsp;34</li>
								<li><button class="btn btn-primary btn-xs"><span class="glyphicon glyphicon-shopping-cart"></span> &nbsp;购物车</button></li>
							</ul>
						</div>
					</div>
				</div>
				
				
				
				
			</div>
			
			<div class="row margin_top_border">
				
				
				<div class="col-sm-3">
					<div class="media">
						<div class="media-left">
							<a href="#">
								<img class="media-object" src="img/5a4af1c22a677.293.png"/>
							</a>
						</div>
						<div class="media-body">
							<ul>
								<li>烩麻食</li>
								<li class="text-muted">月销售34单</li>
								<li class="text-danger">￥ &nbsp;34</li>
								<li><button class="btn btn-primary btn-xs"><span class="glyphicon glyphicon-shopping-cart"></span> &nbsp;购物车</button></li>
							</ul>
						</div>
					</div>
				</div>
				<div class="col-sm-3">
					<div class="media">
						<div class="media-left">
							<a href="#">
								<img class="media-object" src="img/5a4af1c22a677.293.png"/>
							</a>
						</div>
						<div class="media-body">
							<ul>
								<li>烩麻食</li>
								<li class="text-muted">月销售34单</li>
								<li class="text-danger">￥ &nbsp;34</li>
								<li><button class="btn btn-primary btn-xs"><span class="glyphicon glyphicon-shopping-cart"></span> &nbsp;购物车</button></li>
							</ul>
						</div>
					</div>
				</div>
				
				
				
				
			</div>
		</div>
	
		<div class="container" style="height: 500px;">
			这是底部内容
		</div>
	
	
	
		<div class="shopping">
			<div class="shopping_bus"><span class="glyphicon glyphicon-apple"></span>购物车</div>
			
			<h4>购物车</h4>
			<div class="main">
				<h5>已选商品</h5>
				<table class="table">
					
				</table>
			</div>
			
			
			<div class="shopping_bottom">
				<hr />
				<div>共N份,总计666</div>
				<button class="btn btn-success">提交订单</button>
			</div>
		</div>
	
	</body>
</html>

